<template>
    <div class="transaction-home">
      <div class="transaction-box">
        <img @click="returnFalse" src="../../assets/img/close.svg" alt="">
        <div class="font-trans1">{{usdtNum}}</div>
        <div class="font-trans2">USDT</div>
        <div class="font-trans3">请输入支付密码</div>
        <div id="transaction-vant" @click="show = true">
          <div class="transaction-xing">
            <span :class="value.length>=1?'active-xing':''">*</span>
            <span :class="value.length>=2?'active-xing':''">*</span>
            <span :class="value.length>=3?'active-xing':''">*</span>
            <span :class="value.length>=4?'active-xing':''">*</span>
            <span :class="value.length>=5?'active-xing':''">*</span>
            <span :class="value.length>=6?'active-xing':''">*</span>
          </div>
          <van-field style="display: none;"
            readonly
            clickable
            :value="value"
            @touchstart.native.stop="show = true"
          />
          <van-number-keyboard
            v-model="value"
            :show="show"
            :maxlength="6"
            @input="onInput"
            @blur="show = false"
          />
        </div>
      </div>
    </div>

  </template>

  <script>
    import { NumberKeyboard } from 'vant'
  export default {
    name: 'transactionPassword',
    data () {
      return {
        value:'',
        show:true
      }
    },
    props:['usdtNum'],
    components:{
      [NumberKeyboard.name]:NumberKeyboard
    },
    computed: {

    },
    mounted() {
        
    },
    methods: {
      returnFalse(){
        this.$emit('returnFalse',false)
      },
      onInput(key){
        if(this.value.length === 5){
          this.$emit('transactNum',this.value+key)
        }
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .transaction-xing{
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #888888;
      font-size: 18px;
      letter-spacing: 1px;
      margin-top: 20px;
      span{
        display: inline-block;
        width: 13px;
        height: 30px;
        line-height:30px;
      }
    }
    .active-xing{
      color: #6E59FF;
      font-size: 26px;
    }
    .transaction-home{
      background: rgba(0,0,0,.4);
      width: 100%;
      height: 100vh;
      position: absolute;
      top:0px;
      color:#fff;
    }
    .transaction-box{
      margin:188px 40px 0px 40px;
      width: calc(100% - 80px);
      height: 238px;
      background-color: #2F3036;
      border-radius: 14px;
      padding: 14px 12px;
    }
    .font-trans1{
      font-size: 30px;
      font-family: axis;
      text-decoration-line: underline;
      text-align: center;
    }
    .font-trans2{
      font-size: 17px;
      text-align: center;
      margin-top: 6px;
    }
    .font-trans3{
      font-size: 14px;
      color: rgba(255, 255, 255, .8);
      text-align: center;
      margin-top: 30px;
      margin-bottom: 12px;
    }
    .van-number-keyboard{
      background-color: rgba(0,0,0,1);
    }
    #transaction-vant /deep/ .van-key{
      background-color: rgba(255, 255, 255, 0.3)!important;
    }
  </style>
